<!-- 
  @name: 加注站详情
  @date: 2020.3.9
 -->
<template>
	<view class="content">
		<!-- 顶部区 -->
		<view class="top">
			<view class="list">
				<text class="left">加注站名称</text><text class="right">{{info.siteName}}</text>
			</view>
			<view class="list">
				<text class="left">详情地址</text><text class="right">{{info.siteAddress}}</text>
			</view>
			<view class="list">
				<view class="left">地图标点</view>
				<view class="map" @tap="markSite">
					<text class="t">加注站位置已在地图上标记</text>
					<view class="arrow_nav"></view>
				</view>
			</view>
			<view class="list">
				<text class="left">服务电话</text><text class="right">{{info.contactPhone}}</text>
			</view>
			<view class="list">
				<text class="left">尿素品牌</text><text class="right">{{info.siteBrand}}</text>
			</view>
		</view>
		
		<!-- 图片区 -->
		<view class="middle">
			<view class="left">
				<view class="txt">
					<text>加注站</text>
					<text style="margin-top: 20rpx;">形象照片</text>
				</view>
			</view>
			<view class="right">
				<image class="img" v-for="(item, index) in picList" :key="index" :src="item" @tap="showImg(index)"></image>
			</view>
		</view>
		
		<!-- 轮播图-start -->
		<view class="_popup" v-if="swiperShow" @tap="swiperShow = false">
			<view class="close"></view>
		</view>
		<swiper
			class="swiper"
			v-if="swiperShow"
			indicator-dots="true"
			circular="true"
			indicator-color="rgba(255,255,255,.5)"
			indicator-active-color="rgba(255,255,255,1)"
			previous-margin="65rpx"
			next-margin="35rpx"
			:current="swiperCurrent"
			:style="{height: swiperHeight}"
			@change="swiperChange">
			<swiper-item v-for="(item, index) in picList" :key="index">
				<image
					class="img"
					:src="item"
					:style="{height: swiperCurrent === index ? swiperImgHeight : swiperImgHeight2,
							 marginTop: swiperCurrent === index ? '0' : '28rpx'}"
				></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图-end -->
		
		<!-- 按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub" :class="userMain === 1 ? 'edit' : 'bottom'" @tap="goEdit">编辑</view>
		<view class="btn_pub bottom delete" @tap="deleteSite" v-if="userMain === 1">删除</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteId: '',  //加注站id
				info: {},  //信息
				picList: [],  //照片
				userMain: -1,  //账号权限，0-子账号，1-主账号，2-加注站职员
				swiperShow: false,  //是否显示图片轮播
				swiper_height: 0,  //轮播图高度(rpx)
				swiperCurrent: 0,  //轮播图位置
			}
		},
		computed: {
		    swiperHeight() {
		        return this.swiper_height + 'rpx';
		    },
		    swiperImgHeight() {
		        return (this.swiper_height - 70) + 'rpx';
		    },
		    swiperImgHeight2() {
		        return (this.swiper_height - 126) + 'rpx';
		    }
		},
		onLoad(e) {
			this.userMain = this.$store.state.userMain;
			this.siteId = e.siteId;
			this.getInfo();
			this.getSwiperHeight();
			uni.$on('site_editSite', this.getInfo);
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.userMain = this.$store.state.userMain;
				this.getInfo();
				this.$store.commit('hasLogin');
			}
		},
		onUnload() {
			uni.$off('site_editSite', this.getInfo);
		},
		methods: {
			//轮播图滑动
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			//计算轮播区域高度
			getSwiperHeight() {
				let sys = uni.getSystemInfoSync();
				let windowHeight = 750 / sys.windowWidth * sys.windowHeight;  //屏幕可视区域高度转为rpx
				this.swiper_height = windowHeight - 200;
			},
			//点击图片
			showImg(index) {
				this.swiperShow = true;
				this.swiperCurrent = index;
			},
			//删除加注站
			deleteSite() {
				uni.showModal({
					content: '确认删除本加注站吗？',
					confirmColor: '#FF0000',
					confirmText: '删除',
					success: (rs) => {
						if(rs.confirm) {
							this.$http({
								url: this.$api.siteUrl + 'doupdatefillsite',
								data: {
									action: -1,
									siteId: this.siteId
								}
							}).then(res => {
								this.$successToast('已删除！');
								uni.$emit('site_deleteSite', {
									siteId: this.siteId
								});
								this.$sucBack();
							});
						}
					}
				});
			},
			//前往编辑
			goEdit() {
				this.$store.commit('setTmpData', JSON.stringify(this.info));
				this.$navigateTo('./siteEdit?type=e');
			},
			//前往地图标记加注站
			markSite() {
				let url = './siteEditMap?type=det&latitude=' + this.info.siteLat + '&longitude=' + this.info.siteLng;
				this.$navigateTo(url);
			},
			//获取信息
			getInfo() {
				this.$http({
					url: this.$api.siteUrl + 'getfillsitedetail',
					data: {
						siteId: this.siteId,
					}
				}).then(res => {
					this.info = res;
					this.picList = [];
					if(this.info.siteImgs) {
						let arr = this.info.siteImgs.split(',');
						arr.forEach(item => {
							if(item) this.picList.push(item);
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区 */
	.top {
		width: 750rpx;
		background-color: $color-white;
		.list:last-child {
			border-bottom: none;
		}
		.list {
			width: 710rpx;
			height: 100rpx;
			margin-left: 40rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				width: 260rpx;
				text-align: start;
				color: $color-grey-dark;
			}
			.right {
				flex: 1;
				text-align: end;
				padding-right: 40rpx;
			}
			.map {
				flex: 1;
				padding-right: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.t {
					flex: 1;
				}
			}
		}
	}
	
	/* 图片区 */
	.middle {
		width: 750rpx;
		padding: 20rpx 0;
		margin-top: $spacing-col;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		.left {
			width: 252rpx;
			margin-left: 40rpx;
			display: flex;
			justify-content: start;
			.txt {
				color: $color-grey-dark;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
		.right {
			flex: 1;
			padding: 20rpx 0;
			.img {
				width: 120rpx;
				height: 120rpx;
				margin: 10rpx 8rpx;
				border-radius: $border-radius-sm;
			}
		}
	}
	
	/* 轮播图 */
	._popup {
		.close {
			position: fixed;
			top: 40rpx;
			right: 30rpx;
			width: 37rpx;
			height: 37rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAFGAbG47AAACr5SBkYk079.png');
		}
	}
	.swiper {
		position: fixed;
		top: 110rpx;
		width: 750rpx;
		z-index: $z-index-popup-info;
		.img {
			width: 620rpx;
			border-radius: $border-radius-bm;
			transition: all 0.1s ease-in 0s;
		}
	}
</style>
